<template>
  <div class="page">
    <titleBar></titleBar>
    <div class="content">
      <div class="swiper-img-box">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="#232f3e"
          :loop="false"
        >
          <van-swipe-item v-for="item in rotationList" :key="item.id"
            ><img class="swipe-item-img" :src="item.images" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>

      <div class="location-box">
        <div class="area-flex-box" @click="showLocationBox = !showLocationBox">
          <div class="area-box-lf">
            {{ country }}
            {{ cityName ? '/' + cityName : '' }}
          </div>
          <div class="area-box-rg">
            <img
              class="bottom-icon-bl-img"
              src="../../assets/images/home/bottom-icon-bl.png"
              alt=""
            />
          </div>
        </div>
        <!-- 下拉选择框 -->
        <div class="location-select-box" v-if="showLocationBox">
          <div class="search-box">
            <van-field
              class="location-ipt"
              v-model="searchWord"
              right-icon="warning-o"
              placeholder="State of California"
            >
              <template #right-icon>
                <img
                  class="search-icon"
                  src="../../assets/images/home/search-icon.png"
                  alt=""
                />
              </template>
            </van-field>
          </div>
          <div class="location-list">
            <div class="location-state" v-if="showStateBox">
              <!-- <div class="location-list-title">A</div> -->
              <van-collapse v-model="activeName" accordion>
                <van-collapse-item
                  :title="item.label"
                  :name="item.id"
                  v-for="item in deptTreeList"
                  :key="item.id"
                >
                  <template #icon></template>
                  <template #right-icon>
                    <van-checkbox
                      icon-size="20px"
                      shape="square"
                      checked-color="#273458"
                      :checked="activeName === item.id"
                      @click.native.stop="activeName = item.id"
                    />
                  </template>
                  <van-radio-group v-model="city">
                    <van-cell-group>
                      <van-cell
                        v-for="childItem in item.children"
                        clickable
                        :key="childItem.id"
                        :title="childItem.label"
                        @click="handleCityChange(childItem)"
                      >
                        <template #default>
                          <div class="city-value">
                            {{ childItem.cityCount }}
                          </div>
                        </template>
                        <template #right-icon>
                          <van-radio
                            icon-size="20px"
                            checked-color="#273458"
                            :name="childItem.id"
                          />
                        </template>
                      </van-cell>
                    </van-cell-group>
                  </van-radio-group>
                </van-collapse-item>
              </van-collapse>
            </div>
          </div>
        </div>
      </div>

      <div class="swiper-menu-box">
        <div
          class="swiper-menu-item"
          :class="{ activeClassificationBg: checked == item.dictValue }"
          v-for="item in classificationList"
          :key="item.dictValue"
          @click="checkClassification(item)"
        >
          <div class="swiper-menu-p-box">
            <div class="swiper-menu-p">{{ item.dictLabel }}</div>
          </div>
          <div class="swiper-menu-imgBox">
            <img class="swiper-menu-img" :src="item.images" alt="" />
          </div>
        </div>
      </div>

      <div class="detail-box">
        <div class="type-box">
          <div class="all-type-box">
            <div class="type">
              <div
                class="type-text"
                :class="{ activeTypeBg: !isAll }"
                @click="handleRecommend"
              >
                Recommend
              </div>
              <div
                class="type-text"
                :class="{ activeTypeBg: isAll }"
                @click="handleAll"
              >
                All ads
              </div>
            </div>
            <div class="screen" v-if="isAll" @click="showRightPopup">
              <img
                class="screen-img"
                src="../../assets/images/home/screen.png"
                alt=""
              />
            </div>
          </div>

          <div class="type-info">
            {{ advertisementCountData.advertisementCount }} ads in
            {{ advertisementCountData.cityName }}
          </div>
        </div>
        <!--推荐部分 -->
        <div v-if="!isAll">
          <div
            class="recommend-box-item"
            v-for="item in recommendList"
            :key="item.advertisementId"
            @click="Goto_detail(item.advertisementId)"
          >
            <div class="recommend-img-box">
              <div class="recommend-img-lf">
                <img :src="item.recommendImageOne" alt="" />
              </div>

              <div class="recommend-img-rg">
                <div class="recommend-img-rg-top">
                  <img :src="item.recommendImageTwo" alt="" />
                </div>
                <div class="recommend-img-rg-bottom">
                  <img :src="item.recommendImageThree" alt="" />
                </div>
              </div>
            </div>
            <div class="recommend-info-box">
              <div class="recommend-info-lf">
                <div class="info-lf-title">
                  {{ item.race }}/{{ item.occupation }}
                </div>
                <div>
                  <span class="info-lf-text">age:{{ item.age }}</span>
                  <span class="info-lf-text">{{ item.height }}cm</span>
                  <span class="info-lf-text">{{ item.miles }}mi</span>
                </div>
              </div>
              <div
                class="recommend-info-rg"
                @click.stop="showContactPopup(item.phoneNumber)"
              >
                <img src="../../assets/images/home/phone.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- 全部部分 -->
        <div v-if="isAll">
          <div v-for="(item, index) in allList" :key="index">
            <div
              v-if="item.largeALlList.length > 0"
              class="all-box-item"
              @click="Goto_detail(item.largeALlList[0].advertisementId)"
            >
              <div class="big-img-box">
                <img :src="item.largeALlList[0].largeImage" alt="" />
              </div>
              <div class="all-img-info">
                <div class="all-img-info-title">
                  {{ item.largeALlList.advertisementName }}
                </div>
                <div class="all-img-info-text">
                  <span class="info-sp-text"
                    >{{ item.largeALlList[0].race }}/{{
                      item.largeALlList[0].occupation
                    }}</span
                  >
                  <span>{{ item.largeALlList[0].age }}</span>
                  <span>{{ item.largeALlList[0].miles }} mi</span>
                </div>
              </div>
            </div>
            <div class="all-box-item" v-if="item.thumbnailALlList.length > 0">
              <div class="sm-box-item">
                <div
                  class="sm-box-item-lf"
                  @click="Goto_detail(item.thumbnailALlList[0].advertisementId)"
                  v-if="item.thumbnailALlList.length > 0"
                >
                  <div class="small-img-box">
                    <img :src="item.thumbnailALlList[0].imagesOne" alt="" />
                  </div>
                  <div class="sm-box-text">
                    <span class="sm-box-sp-text"
                      >{{ item.thumbnailALlList[0].race }}/{{
                        item.thumbnailALlList[0].occupation
                      }}</span
                    >
                    <span>{{ item.thumbnailALlList[0].age }}</span>
                    <span>{{ item.thumbnailALlList[0].miles }} mi</span>
                  </div>
                </div>
                <div
                  class="sm-box-item-rg"
                  @click="Goto_detail(item.thumbnailALlList[1].advertisementId)"
                  v-if="item.thumbnailALlList.length > 1"
                >
                  <div class="small-img-box">
                    <img :src="item.thumbnailALlList[1].imagesOne" alt="" />
                  </div>
                  <div class="sm-box-text">
                    <span class="sm-box-sp-text"
                      >{{ item.thumbnailALlList[1].race }}/{{
                        item.thumbnailALlList[1].occupation
                      }}</span
                    >
                    <span>{{ item.thumbnailALlList[1].age }}</span>
                    <span>{{ item.thumbnailALlList[1].miles }} mi</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="all-box-item" v-if="item.thumbnailALlList.length > 2">
              <div class="sm-box-item">
                <div
                  v-if="item.thumbnailALlList.length > 2"
                  class="sm-box-item-lf"
                  @click="Goto_detail(item.thumbnailALlList[2].advertisementId)"
                >
                  <div class="small-img-box">
                    <img :src="item.thumbnailALlList[2].imagesOne" alt="" />
                  </div>
                  <div class="sm-box-text">
                    <span class="sm-box-sp-text"
                      >{{ item.thumbnailALlList[2].race }}/{{
                        item.thumbnailALlList[2].occupation
                      }}</span
                    >
                    <span>{{ item.thumbnailALlList[2].age }}</span>
                    <span>{{ item.thumbnailALlList[2].miles }} mi</span>
                  </div>
                </div>
                <div
                  v-if="item.thumbnailALlList.length > 3"
                  class="sm-box-item-rg"
                  @click="Goto_detail(item.thumbnailALlList[3].advertisementId)"
                >
                  <div class="small-img-box">
                    <img :src="item.thumbnailALlList[3].imagesOne" alt="" />
                  </div>
                  <div class="sm-box-text">
                    <span class="sm-box-sp-text"
                      >{{ item.thumbnailALlList[3].race }}/{{
                        item.thumbnailALlList[3].occupation
                      }}</span
                    >
                    <span>{{ item.thumbnailALlList[3].age }}</span>
                    <span>{{ item.thumbnailALlList[3].miles }} mi</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧弹出层 -->
      <van-popup
        v-model="showRight"
        position="right"
        :style="{ width: '60%', height: '100%' }"
      >
        <!-- 种族选择框 -->
        <div class="showRight-box">
          <div
            class="area-flex-box"
            @click=";(showRaceBox = !showRaceBox), (showOccupationBox = false)"
          >
            <div class="area-box-lf">race</div>
            <div class="area-box-rg">
              <img
                class="bottom-icon-bl-img"
                src="../../assets/images/home/bottom-icon-bl.png"
                alt=""
              />
            </div>
          </div>

          <div class="select-down-box" v-if="showRaceBox">
            <div class="location-list">
              <div class="location-state">
                <div class="location-list-box">
                  <van-checkbox-group v-model="race">
                    <van-cell-group>
                      <van-cell
                        v-for="item in raceList"
                        clickable
                        :key="item.dictValue"
                        :title="item.dictLabel"
                      >
                        <template #right-icon>
                          <van-checkbox
                            checked-color="#273458"
                            icon-size="20px"
                            :name="item.dictValue"
                          />
                        </template>
                      </van-cell>
                    </van-cell-group>
                  </van-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="showRight-box">
          <div
            class="area-flex-box"
            @click="
              ;(showOccupationBox = !showOccupationBox), (showRaceBox = false)
            "
          >
            <div class="area-box-lf">occupation</div>
            <div class="area-box-rg">
              <img
                class="bottom-icon-bl-img"
                src="../../assets/images/home/bottom-icon-bl.png"
                alt=""
              />
            </div>
          </div>

          <div class="select-down-box" v-if="showOccupationBox">
            <div class="location-list">
              <div class="location-state">
                <div class="location-list-box">
                  <van-checkbox-group v-model="occupation">
                    <van-cell-group>
                      <van-cell
                        v-for="item in occupationList"
                        clickable
                        :key="item.dictValue"
                        :title="item.dictLabel"
                      >
                        <template #right-icon>
                          <van-checkbox
                            checked-color="#273458"
                            icon-size="20px"
                            :name="item.dictValue"
                          />
                        </template>
                      </van-cell>
                    </van-cell-group>
                  </van-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="showRightBox-title">
          <div class="handle-btn">
            <div
              class="handle-btn-item"
              @click="
                ;(race = []),
                  (occupation = []),
                  (showRaceBox = false),
                  (showOccupationBox = false)
              "
            >
              Reset
            </div>
            <div class="handle-btn-item" @click="handleAll">Apply Filters</div>
          </div>
        </div>
      </van-popup>
      <!-- 电话弹窗 -->
      <van-popup v-model="showContact">
        <div class="popup-box">
          <div class="popup-head">phone number</div>
          <img
            @click="showContact = false"
            class="close-icon"
            src="../../assets/images/close-icon.png"
            alt=""
          />
          <div class="content">{{ phoneNumber }}</div>
          <div class="confirm-btn" @click="copyPhoneNumber">copy</div>
        </div>
      </van-popup>
    </div>

    <router-view />
    <van-tabbar route active-color="#027AFC" inactive-color="#666666">
      <van-tabbar-item replace to="/vip">
        <span> {{ $t('vip') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/">
        <span> {{ $t('home') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/postAd">
        <span> {{ $t('post AD') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/myAD">
        <span> {{ $t('my AD') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active4 : icon.inactive4" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/personal">
        <span> {{ $t('profile') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active5 : icon.inactive5" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import titleBar from '../../components/titleBar.vue'
import {
  apiAdvertisingClassification,
  apiGetRecommendList,
  apiGetAllList,
  apiOccupation,
  apiRace,
  apiRotationList,
  apiGetAdvertisementCount,
  apiGetUserDeptTree,
} from '../../request/api'
export default {
  name: 'Home',
  components: { titleBar },
  data() {
    return {
      active: 0,
      icon: {
        active1: require('../../assets/images/tabbar/tabbar1.png'),
        inactive1: require('../../assets/images/tabbar/tabbar2.png'),
        active2: require('../../assets/images/tabbar/tabbar3.png'),
        inactive2: require('../../assets/images/tabbar/tabbar4.png'),
        active3: require('../../assets/images/tabbar/tabbar5.png'),
        inactive3: require('../../assets/images/tabbar/tabbar6.png'),
        active4: require('../../assets/images/tabbar/tabbar7.png'),
        inactive4: require('../../assets/images/tabbar/tabbar8.png'),
        active5: require('../../assets/images/tabbar/tabbar9.png'),
        inactive5: require('../../assets/images/tabbar/tabbar10.png'),
      },
      isAll: false,
      // lang: "EN",
      country: 'USA',
      showLocationBox: false,
      searchWord: '',
      state: '',
      showStateBox: true,
      token: '',
      // 分类列表
      classificationList: [],
      checked: '',
      // 列表参数
      city: '',
      cityName: '',
      stateId: '',
      category: '1',
      miles: '',
      race: [],
      occupation: [],
      // 推荐列表
      recommendList: [],
      // 所有广告列表
      allList: [],
      // 电话控制
      showContact: false,
      phoneNumber: '',
      // 右侧弹出层
      showRight: false,
      // 种族列表
      raceList: [],
      // 职业列表
      occupationList: [],
      showRaceBox: false,
      showOccupationBox: false,
      // 轮播列表
      rotationList: [],
      // 获取当前城市名称与广告总数
      advertisementCountData: {},
      // 地址树形数据获取
      deptTreeList: [],
      activeName: '',
      cityResult: [],
      tokenKey: localStorage.getItem('key'),
    }
  },
  created() {
    // 分类字典数据获取
    apiAdvertisingClassification().then((res) => {
      if (res.code == 200) {
        this.classificationList = res.data
        this.classificationList = this.classificationList.filter(
          (x) => x.dictValue !== '3' && x.dictValue !== '8'
        )
        console.log('分类字典数据获取', this.classificationList)
      }
    })
    apiOccupation().then((res) => {
      if (res.code == 200) {
        this.occupationList = res.data
      }
    })
    apiRace().then((res) => {
      if (res.code == 200) {
        this.raceList = res.data
      }
    })
    // 轮播接口
    apiRotationList().then((res) => {
      if (res.code == 200) {
        this.rotationList = res.rows
        console.log('轮播接口 ', res)
      }
    })
    // 获取当前城市名称与广告总数
    this.getAdvertisementCount()

    // 地址树形数据获取
    apiGetUserDeptTree().then((res) => {
      if (res.code == 200) {
        this.deptTreeList = res.data[0].children
      }
    })

    this.checked = 1
  },
  mounted() {
    this.getRecommendList()
    console.log(localStorage.getItem('key'), '++++++++')
  },
  methods: {
    // 选择州
    // todo

    // 选择城市
    handleCityChange(childItem) {
      this.city = childItem.id
      this.cityName = childItem.label
      console.log(this.city)
      if (this.isAll) {
        this.getAllList()
      } else {
        this.getRecommendList()
      }
      this.showLocationBox = false
    },
    // 选择分类
    checkClassification(item) {
      this.checked = item.dictValue
      this.category = item.dictValue
      if (this.isAll) {
        this.getAllList()
      } else {
        this.getRecommendList()
      }
    },
    // 点击推荐
    handleRecommend() {
      this.isAll = false
      this.getRecommendList()
    },
    // 点击全部
    handleAll() {
      this.isAll = true
      this.getAllList()
    },
    // 请求推荐列表
    getRecommendList() {
      apiGetRecommendList({
        city: this.city,
        category: this.category,
        miles: this.miles,
      }).then((res) => {
        if (res.code == 200) {
          this.recommendList = res.rows
        }
      })
    },
    getAllList() {
      apiGetAllList({
        city: this.city,
        category: this.category,
        miles: this.miles,
        race: this.race.join(','),
        occupation: this.occupation.join(','),
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.rows)
          this.allList = res.rows
          this.showRight = false
        }
      })
    },
    // 电话弹出层
    showContactPopup(phone) {
      this.phoneNumber = phone
      this.showContact = true
    },
    // 复制电话
    copyPhoneNumber() {
      this.$copyText(this.phoneNumber).then(
        (e) => {
          this.$toast.success('复制成功')
        },
        (err) => {
          this.$toast.fail('复制失败')
        }
      )
    },
    // 全部部分右侧筛选
    showRightPopup() {
      this.showRight = true
    },
    // Goto_detail
    Goto_detail(advertisementId) {
      this.$router.push({
        path: '/detail',
        query: {
          advertisementId: advertisementId,
          category: this.category,
        },
      })
    },
    // 获取当前城市名称与广告总数
    getAdvertisementCount() {
      apiGetAdvertisementCount({
        city: this.stateId,
      }).then((res) => {
        if (res.code == 200) {
          this.advertisementCountData = res.data
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  background: #f0f0f0;
}
.content {
  margin: 14px 17px 120px;
  :deep(.van-swipe__indicator) {
    width: 14px;
    height: 14px;
    margin-right: 10px !important;
  }
  .swipe-item-img {
    width: 100%;
    height: auto;
  }
  .swiper-menu-box {
    margin: 24px 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .swiper-menu-item {
    background: #ffffff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 230px;
    height: 210px;
    color: #000000;
    margin-right: 20px;
  }
  .activeClassificationBg {
    background: #273458;
    color: #fff;
  }
  .swiper-menu-p-box {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: left;
  }
  .swiper-menu-p {
    font-size: 20px;
    font-weight: 600;
    text-align: left;
  }
  .swiper-menu-imgBox {
    height: 128px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .swiper-menu-img {
    width: 200px;
    height: 128px;
  }

  // 地区下拉框
  .location-box {
    position: relative;
    .area-flex-box {
      height: 80px;
      background: #ffffff;
      border: 1px solid rgba(112, 112, 112, 0.34);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
    }
    .area-box-lf {
      font-size: 28px;
      font-weight: 400;
      color: #242424;
    }
    .bottom-icon-bl-img {
      width: 48px;
      height: 48px;
    }
    .location-select-box {
      z-index: 1;
      background: #fff;
      padding: 20px;
    }
    .search-box {
      height: 81px;
      background: #ffffff;
      border: 1px solid #b2b2b2;
      margin-bottom: 30px;
    }
    .location-ipt {
      height: 81px;
      align-items: center;
    }
    :deep(.van-field__control) {
      font-size: 28px;
    }
    .search-icon {
      width: 29px;
      height: 29px;
    }
    .location-list {
      margin-bottom: 40px;
    }
    .location-list-title {
      font-size: 30px;
      font-weight: bold;
      color: #000000;
    }
    .state-cell {
      box-sizing: border-box;
      padding: 26px 0;
      overflow: hidden;
      font-size: 28px;
      font-weight: 400;
      color: #000000;
    }
    .state-value {
      font-size: 28px;
      font-weight: 400;
      color: #000000;
      text-align: center;
    }
    .city-cell {
      box-sizing: border-box;
      padding: 26px 0;
      overflow: hidden;
      font-size: 24px;
      font-weight: 400;
      color: #989898;
    }
    .city-value {
      font-size: 24px;
      font-weight: 400;
      color: #989898;
      text-align: center;
    }
  }

  .detail-box {
    // padding: 0 21px;
    margin-top: 24px;
    .type-box {
      padding: 24px 21px 10px;
      background: #ffffff;
    }
    .all-type-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .screen {
      margin-bottom: 24px;
    }
    .screen-img {
      width: 30px;
      height: 30px;
    }
    .type {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
    }
    .type-text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      color: #273458;
      width: 218px;
      height: 70px;
      background: #ffffff;
      opacity: 0.88;
      border: 1px solid #273458;
      box-sizing: border-box;
    }
    .activeTypeBg {
      background: #273458;
      border: 1px solid #273458;
      box-sizing: border-box;
      color: #ffffff;
    }
    .type-info {
      font-size: 24px;
      font-weight: 400;
      color: #111111;
    }
    .recommend-box-item {
      padding: 21px 21px 10px;
      background: #ffffff;
      margin-bottom: 20px;
    }
    .recommend-img-box {
      display: flex;
      height: 472px;
    }
    .recommend-img-lf {
      margin-right: 8px;
      width: 52.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .recommend-img-rg {
      margin-left: 8px;
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .recommend-img-rg-top {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(50% - 8px);
    }
    .recommend-img-rg-bottom {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(50% - 8px);
    }
    .recommend-img-box img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .recommend-img-rg-top img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .recommend-img-rg-bottom img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .recommend-info-box {
      padding: 25px 12px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .info-lf-title {
      font-size: 35px;
      font-weight: bold;
      color: #000000;
    }
    .recommend-info-rg img {
      width: 66px;
      height: 66px;
    }
    .info-lf-text {
      font-size: 30px;
      font-weight: 400;
      color: #000000;
      margin-right: 40px;
    }
    .all-box-item {
      padding: 21px 21px;
      background: #fff;
      margin-bottom: 20px;
      position: relative;
    }
    .all-box-item img {
      width: 100%; /*最大宽度不超过父元素宽度*/
      height: 100%; /*最大高度不超过父元素高度*/
      object-fit: contain;
    }
    .all-img-info {
      position: absolute;
      left: 30px;
      bottom: 30px;
    }
    .all-img-info-title {
      font-size: 40px;
      font-weight: 500;
      color: #dbdbdb;
    }
    .all-img-info-text {
      font-size: 24px;
      font-weight: 400;
      color: #dbdbdb;
    }
    .all-img-info-text span {
      margin-right: 20px;
    }
    .info-sp-text {
      font-size: 24px;
      font-weight: bold;
    }
    .sm-box-item {
      display: flex;
      align-items: center;
    }
    .sm-box-item-lf {
      margin-right: 10px;
      width: 50%;
    }
    .sm-box-item-rg {
      margin-left: 10px;
      width: 50%;
    }
    .sm-box-item-lf .sm-box-item-rg img {
      width: 100%; /*最大宽度不超过父元素宽度*/
      height: 100%; /*最大高度不超过父元素高度*/
      object-fit: contain;
      margin-bottom: 20px;
    }
    .sm-box-text {
      font-size: 24px;
      font-weight: 400;
      color: #636363;
      padding-top: 20px;
      margin-top: 20px;
      border-top: 2px solid #000000;
    }
    .sm-box-text span {
      margin-right: 10px;
    }
    .sm-box-sp-text {
      font-size: 24px;
      font-weight: bold;
      color: #000000;
    }
  }
}
// 弹窗样式
.popup-box {
  width: 567px;
  background: #ffffff;
  .popup-head {
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 400;
    color: #232f3e;
    border-bottom: 1px solid #707070;
  }
  .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
  }
  .content {
    margin: 21px 35px;
    padding: 15px;
    height: 247px;
    background: #ffffff;
    font-size: 40px;
    font-weight: bold;
    color: #232f3e;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-btn {
    margin: 21px 35px 35px;
    height: 70px;
    width: 498px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
  }
}
.right-item-box {
  margin-bottom: 20px;
}
.showRight-box {
  position: relative;
  margin: 20px 0;
  padding: 10px;
  .area-flex-box {
    height: 80px;
    background: #ffffff;
    border: 1px solid rgba(112, 112, 112, 0.34);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }
  .area-box-lf {
    font-size: 28px;
    font-weight: 400;
    color: #242424;
  }
  .bottom-icon-bl-img {
    width: 48px;
    height: 48px;
  }
  .location-select-box {
    position: absolute;
    z-index: 1;
    background: #fff;
    padding: 20px;
    left: 0;
    right: 0;
  }
  .location-list {
    margin-bottom: 40px;
  }
  .location-list-title {
    font-size: 30px;
    font-weight: bold;
    color: #000000;
  }
  .state-cell {
    box-sizing: border-box;
    padding: 26px 0;
    overflow: hidden;
    font-size: 28px;
    font-weight: 400;
    color: #000000;
  }
  .state-value {
    font-size: 28px;
    font-weight: 400;
    color: #000000;
    text-align: center;
  }
  .city-cell {
    box-sizing: border-box;
    padding: 26px 0;
    overflow: hidden;
    font-size: 24px;
    font-weight: 400;
    color: #989898;
  }
  .city-value {
    font-size: 24px;
    font-weight: 400;
    color: #989898;
    text-align: center;
  }
  .van-cell {
    align-items: center;
  }
  .van-cell__title {
    font-size: 28px;
  }
}
.showRightBox-title {
  font-size: 30px;
  text-align: center;
  margin: 30px auto;
  padding: 20px;
}
.handle-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.handle-btn-item {
  border: 1px solid #273458;
  border-radius: 10px;
  padding: 10px 15px;
  color: #273458;
}
.sure-btn {
  margin: 0 auto;
  width: 100%;
  height: 70px;
}
.van-collapse-item .van-cell {
  align-items: center;
}
:deep(.van-collapse-item__content) {
  padding: 0 0.213333rem;
}
.big-img-box {
  height: 532px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small-img-box {
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}
</style>
